<template>
  <div class="suggest" v-loading="!singer&&!songs.length" v-no-result="noResult" ref="rootRef">
    <ul class="suggest-list">
      <li class="suggest-item" v-if="singer" @click="selectSinger(singer)">
        <div class="icon">
          <i class="icon-mine"></i>
        </div>
        <div class="name">
          <p class="text">{{ singer.name }}</p>
        </div>
      </li>
      <li class="suggest-item" v-for="song in songs" :key="song.id" @click="selectSong(song)">
        <div class="icon">
          <i class="icon-music"></i>
        </div>
        <div class="name">
          <p class="text">{{ song.singer }}-{{ song.name }}</p>
        </div>
      </li>
      <div class="suggest-item" v-loading="pullUpLoading"></div>
    </ul>
  </div>
</template>
<script>
import { ref, watch, computed } from 'vue'
import { search } from '@/service/search'
import { processSongs } from '@/service/song'
import usePullUpLoad from './use-pull-up-load'
export default {
  name: 'SuggestList',
  props: {
    query: {
      type: String
    },
    // 要不要渲染出歌手
    showSinger: {
      type: Boolean,
      default: true
    }
  },
  emits: ['select-song', 'select-singer'],
  setup (props, { emit }) {
    const singer = ref(null)
    const songs = ref([])
    const hasMore = ref(false)
    const page = ref(1)

    const noResult = computed(() => {
      return !singer.value && !songs.value.length && hasMore.value
    })

    watch(() => props.query, async (newQuery) => {
      if (!newQuery) {
        return 0
      } else {
        await searchFirst()
      }
    })

    // methods
    async function searchFirst () {
      page.value = 1
      songs.value = []
      singer.value = null
      hasMore.value = false
      const result = await search(props.query, page.value, props.showSinger)
      // 为歌曲添加url
      songs.value = await processSongs(result.songs)
      singer.value = result.singer
      hasMore.value = result.hasMore
      if (!songs.value.length) {
        hasMore.value = true
      }
    }

    async function searchMore () {
      if (!hasMore.value) {
        return
      }
      page.value++
      const result = await search(props.query, page.value, props.showSinger)
      songs.value = songs.value.concat(await processSongs(result.songs))
      hasMore.value = result.hasMore
    }

    function selectSong (song) {
      emit('select-song', song)
    }

    function selectSinger (singer) {
      emit('select-singer', singer)
    }
    // hooks
    const { rootRef, isPullUpLoad } = usePullUpLoad(searchMore)
    const pullUpLoading = computed(() => {
      return isPullUpLoad.value && hasMore.value
    })
    return {
      rootRef,
      singer,
      songs,
      hasMore,
      page,
      searchFirst,
      isPullUpLoad,
      pullUpLoading,
      selectSong,
      selectSinger,
      noResult
    }
  }
}
</script>
<style lang="scss" scoped>
.suggest {
  height: 100%;
  overflow: hidden;
  z-index: 200;
  .suggest-list {
    padding: 0 1.279318rem;
    .suggest-item {
      display: flex;
      align-items: center;
      padding-bottom: .852878rem;
      .icon {
        flex: 0 0 1.279318rem;
        width: 1.279318rem;
        [class^='icon-'] {
          font-size: .597015rem;
          color: $color-text-d;
        }
      }
      .name {
        flex: 1;
        font-size: $font-size-medium;
        color: $color-text-d;
        overflow: hidden;
        .text {
          @include no-wrap();
        }
      }
    }
  }
}
</style>
